<template>
  <div>
    <a-radio-group style="margin-right: 10px" v-model="type" size="small" @change="changeType">
      <a-radio-button value="month" v-if="['all','month'].includes(mode)">月</a-radio-button>
      <a-radio-button value="quarter" v-if="['all','quarter'].includes(mode)">季</a-radio-button>
      <a-radio-button value="year" v-if="['all','year'].includes(mode)">年</a-radio-button>
    </a-radio-group>
    <a-month-picker
      @change="onChangeDay"
      v-model="time"
      placeholder="请选择月份"
      v-if="type==='month'"
      :default-value="moment(new Date(), 'YYYY-MM')"
      format="YYYY-MM"
    />
    <div v-if="type==='quarter'" style="display: inline-flex; gap: 10px">
      <a-date-picker
        v-model="yearForQuarter"
        mode="year"
        format="YYYY"
        placeholder="选择年份"
        @panelChange="handleYearChange"
        style="width: 120px"
      />
      <a-select
        v-model="selectedQuarter"
        style="width: 120px"
        @change="handleQuarterChange"
        placeholder="请选择季度"
      >
        <a-select-option v-for="q in quarters" :key="q.value" :value="q.value">
          {{ q.label }}
        </a-select-option>
      </a-select>
    </div>
    <a-date-picker
      v-if="type==='year'"
      :disabledDate="disabledDate"
      inputReadOnly
      allowClear
      v-model="time"
      mode="year"
      format="YYYY"
      :open="isopen"
      placeholder="请选择年度"
      @change="clearValue"
      @focus="changeopen"
      @panelChange="handlePanelChange"
    />
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "DateRangeRadio",
  data() {
    return {
      isopen: false,
      yearForQuarter: moment(),
      selectedQuarter: null,
      quarters: [
        { value: 1, label: '第一季度' },
        { value: 2, label: '第二季度' },
        { value: 3, label: '第三季度' },
        { value: 4, label: '第四季度' }
      ]
    }
  },
  props: {
    type: {
      type: String,
      default: 'month',
      required: true
    },
    time: {
      type: Object,
      default: () => moment(),
      required: true
    },
    mode: {
      type: String,
      default: 'all',
      required: false
    }
  },
  created() {
    // 初始化时设置当前季度
    this.initQuarterValue();
  },
  methods: {
    // 初始化季度值
    initQuarterValue() {
      const now = moment();
      const currentYear = now.year();
      const currentQuarter = Math.ceil((now.month() + 1) / 3);

      this.yearForQuarter = moment().year(currentYear);
      this.selectedQuarter = currentQuarter;
      this.updateQuarterTime(true);
    },

    // 更新季度时间
    updateQuarterTime(forceUpdate = false) {
      if (!this.selectedQuarter) return;

      const startMonth = (this.selectedQuarter - 1) * 3;
      const newTime = this.yearForQuarter
        .clone()
        .month(startMonth)
        .startOf('month');

      // 仅在时间变化时触发更新
      if (forceUpdate || !newTime.isSame(this.time, 'month')) {
        this.$emit("update:time", newTime);
      }
    },

    // 处理年份变化
    handleYearChange(value) {
      this.yearForQuarter = moment(value);
      this.updateQuarterTime();
      this.$emit("changeData");
    },

    // 处理季度变化
    handleQuarterChange(value) {
      this.selectedQuarter = value;
      this.updateQuarterTime();
      this.$emit("changeData");
    },

    moment,
    onChangeDay() {
      this.$emit("update:time", this.time);
      this.$emit("changeData");
    },

    disabledDate(current) {
      return current > moment().endOf('year');
    },

    handlePanelChange(value, mode) {
      this.$emit("update:time", moment(value).startOf('year'));
      this.isopen = false;
      this.$emit("changeData");
    },

    clearValue() {
      this.$emit("clearValue");
    },

    changeopen() {
      this.isopen = true;
    },

    changeType(e) {
      this.type = e.target.value;
      let newTime;

      switch(this.type) {
        case 'month':
          newTime = this.time.isValid()
            ? this.time.startOf('month')
            : moment().startOf('month');
          break;
        case 'quarter':
          // 使用当前年份和之前选择的季度
          const baseYear = this.yearForQuarter.year();
          const quarter = this.selectedQuarter || Math.ceil((moment().month() + 1) / 3);
          newTime = moment()
            .year(baseYear)
            .month((quarter - 1) * 3)
            .startOf('month');
          break;
        case 'year':
          newTime = this.time.isValid()
            ? this.time.startOf('year')
            : moment().startOf('year');
          break;
      }

      // 确保触发更新
      if (!newTime.isSame(this.time, 'month')) {
        this.$emit("update:time", newTime);
      }
      this.$emit("update:type", this.type);
      this.$emit("changeData");
    },
  }
}
</script>

<style scoped>

</style>